<template>
  <div class="app-container">
    <el-container class="dcs-main-container" >
      <el-header class="date-search-header">
        <div class="date-picker">
            <el-date-picker
            v-model="apvQuery.start"
            type="date"
            placeholder="选择日期"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"></el-date-picker>
            <el-button style="margin-left: 10px" type="primary" @click="fetchData">筛选</el-button>
          </div>
      </el-header>
      <el-main>
        <el-table :data="reportData"
                  style="width: 100%"
                  :border="true"
                  v-loading="tableLoading"
                  element-loading-text="统计生成中..."
                  element-loading-spinner="el-icon-loading">
          <el-table-column v-for="(col,idx) in reportCols" :key="idx" :prop="col.prop" :label="col.label" :type="col.type" :width="col.width" :fixed="col.fixed" align="center">
            <template slot-scope="scope">
              <el-tag type="success" size="mini" v-if="typeof scope.row[col.prop]!=='string'&&scope.row[col.prop]">已填写</el-tag>
              <el-tag type="danger" size="mini" v-else-if="!scope.row[col.prop]">未填写</el-tag>
              <span v-else>{{scope.row[col.prop]}}</span>
            </template>
          </el-table-column>
        </el-table>

      </el-main>
    </el-container>
  </div>
</template>

<script>
  import homeApi from '@/api/article'
  import {parseTime} from "@/utils"
  const today = parseTime(new Date(),'{y}-{m}-{d}')
  export default {
    name: 'manager-enter-count',
    data(){
      return {
        apvQuery:{
          start:today,
        },
        reportCols:[],
        reportData: [],
        tableLoading:false
      }
    },
    created() {
      this.fetchData()
    },
    methods:{
      async fetchData() {
        this.tableLoading=true
        homeApi.summaryDetail(this.apvQuery).then(res=>{
          const tableData = this.convertData(res.data)
          this.reportCols = tableData[0]
          setTimeout(()=>{
            this.reportData = tableData[1]
            this.tableLoading=false
          },200)
        })
      },
      convertData(dataList){
        let tbCols=[]
        let tbArr=[]
        dataList.header.forEach(hd=>{
          tbCols.push({
            prop:hd.en_name,
            label:hd.cn_name,
            children:[]
          })
        })
        for (let data of dataList.data){
          let tbEntity = {}
          for (let tag in data){
            tbEntity[tag] = data[tag]
          }
          tbArr.push(tbEntity)
        }
        return [tbCols,tbArr]
      }
    }

  }
</script>

<style lang="scss" scoped>
  .app-container{
    padding: 0;

    .dcs-main-container{
      width: 100%;
      min-height: calc(100vh - 84px);
    }
    .date-search-header{
      padding: 0 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

  }

</style>
